<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>首页</title>
  <!-- 导航样式 -->
  <link rel="stylesheet" href="./css/bootstrap-theme.min.css">
  <link rel="stylesheet" href="./css/bootstrap.min.css">
  <!-- 重置样式 -->
  <link rel="stylesheet/less" href="./css/reset.less">
  <!-- 公共样式 -->
  <link rel="stylesheet/less" href="./css/commet.less">

  <!-- 本页样式 -->
  <link rel="stylesheet/less" href="./css/inheritance.less">
</head>

<body>
  <!-- 底部导航栏 -->

  <div class="navbar navbar-default navbar-fixed-bottom">
    <!-- <a class="header_img" href="#"><img src="../image/avatar1.png" alt=""></a> -->
    <ul class="navbar-brand">
      <li class="dropdown">
        <div class="headers">
          <a href="index.html">
            <img src="./image/images/2_07.png" alt="">
            <div class="tite">
              <span>首页</span>
            </div>
          </a>
        </div>

        <div class="headers">
          <a href="mall.html">
            <img src="./image/images/3_14.png" alt="">
            <div class="tite">
              <span>抢票</span>
            </div>
          </a>
        </div>

        <div class="headers">
          <a href="order.html">
            <img src="./image/images/4_16.png" alt="">
            <div class="tite">
              <span>订单</span>
            </div>
          </a>
        </div>

        <div class="headers">
          <a href="Personal.html">
            <img src="./image/images/5_09.png" alt="">
            <div class="tite">
              <span>商城</span>
            </div>
          </a>
        </div>

        <div class="headers">
          <a href="tickets.html">
            <img src="./image/images/6_11.png" alt="">
            <div class="tite">
              <span>个人中心</span>
            </div>
          </a>
        </div>

      </li>
    </ul>

  </div>
  <!-- 搜索条 -->
  <div class="box">
    <div class="list">
      <div class="but">
        <img src="./image/images/sou_03.png" alt="">
        <input type="text" id="txt" placeholder="请输入要搜索的内容">
      </div>
      <div class="dome" id="dome">
        <div class="item">大家都在搜的内容</div>
        <div class="item">less</div>
        <div class="item">less</div>
        <div class="item">less</div>
        <div class="item">less</div>
      </div>
    </div>
  </div>

  <!-- 内容页 -->
  <div id="border">
    <!-- 主联系 -->
    <div id="lost">
      <span class="style1">
        <p>酒店</p>
      </span>
      <span>
        <p>火车票</p>
      </span>
      <span>
        <p>机票</p>
      </span>
    </div>
    <!-- 次联系 -->
    <div id="Second">
      <!-- 内容栏 -->
      <div class="lost" style="display: block;">
        <div class="item" style="background: rgb(255, 255, 255);color: rgb(0, 0, 0);">
          <p>xx酒店</p>
        </div class="list">
        <p class="time">6月16日</p>
        <p>今天</p>
        <div class="item2">
          <p>VIP房<input type="checkbox" name="chk" id="chk1" /></p>
          <p>经济房<input type="checkbox" name="chk" id="chk1" /></p>
        </div>
        <div class="wed">
          <p>是否预约</p>
        </div>
        <div class="item3">
          <p>xx酒店</p>
          <p>xx酒店</p>
          <p>xx酒店</p>
        </div>
      </div>
      <div class="lost">
        <div class="item">
          <p>广州</p>
          <img src="./image/images/zuoy_03.png" alt="">
          <p>北京</p>
        </div>
        <div class="list">
          <p class="time">6月16日</p>
          <div class="titie">
            <p>今天</p>
          </div>
        </div>
        <div class="item2">
          <p>只看高铁动车<input type="checkbox" name="chk" id="chk1" /></p>
          <p>学生票<input type="checkbox" name="chk" id="chk1" /></p>
        </div>
        <div class="wed">
          <p>查询车票</p>
        </div>
        <div class="item3">
          <p>广州-上海</p>
          <p>广州-杭州</p>
          <p>北京-杭州</p>
        </div>
      </div>
      <div class="lost">

        <div class="item">
          <p>广州</p>
          <img src="./image/images/zuoy_03.png" alt="">
          <p>北京</p>
        </div>
        <div class="list">
          <p class="time">6月16日</p>
          <div class="titie">
            <p>今天</p>
          </div>
        </div>
        <div class="item2">
          <p>经济舱<input type="checkbox" name="chk" id="chk1" /></p>

          <p>商务舱<input type="checkbox" name="chk" id="chk1" /></p>


        </div>
        <div class="wed">
          <p>查询航班</p>
        </div>
        <div class="item3">
          <p>广州-上海</p>
          <p>广州-杭州</p>
          <p>北京-杭州</p>
        </div>
      </div>
    </div>

  </div>


  <!-- 广告栏与福利栏 -->
  <div class="header">
    <div class="list">
      <div class="one">
        <img src="./image/images/1_03.png" alt="">
        <p>180元新客礼包待领取</p>
      </div>
      <p class="right">去领取></p>
    </div>
  </div>

</body>

</html>
<script src="./js/jquery-3.5.1.min.js"></script>
<script src="./js/bootstrap.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script src="./js/less.min.js"></script>

<script>
  document.getElementById('txt').onfocus = function () {
    document.getElementById('dome').style.height = '105px';
  }
  document.getElementById('txt').onblur = function () {
    document.getElementById('dome').style.height = '0px';
  }

  $('#lost span').click(function () {
    // 获取当前对象的index索引
    var index = $(this).index()
    // 先把全部的内容隐藏，根据index判断哪个要显示的
    $('#Second .lost').hide().eq(index).show()
    // console.log(index)
    if (index == 0) {
      $(this).addClass('style1').siblings().removeClass()
      $('#Second .lost').css({
        'background': '#fff',
        'color': '#000'
      })
    } else if (index == 1) {
      $(this).addClass('style2').siblings().removeClass()
      $('#Second .lost').css({
        'background': '#fff',
        'color': '#000'
      })
    } else if (index == 2) {
      $(this).addClass('style3').siblings().removeClass()
      $('#Second .lost').css({
        'background': '#fff',
        'color': '#000'
      })
    }
  })

</script>